import React from 'react';
import {connect} from 'dva';
import {Table, Row, Col, Form, Input, Radio, DatePicker, Select, Button } from 'antd';
import ClaimDetail from '../../../components/forex/ClaimDetail';
import OperatorConstant from "../../../utils/OperatorConstant";
import RightBox from "../../../components/commons/RightBox";
import RIGHT from "../../../utils/RightConstants";

const R = require('ramda');
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

export default connect(({foreignExchangeManage, claim}) => ({foreignExchangeManage, claim}))(
    Form.create()(class claim extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            }
        }

        componentDidMount() {
            this.props.dispatch({
                type: 'foreignExchangeManage/getForexList',
                payload: {
                    status: "1",
                }
            });
        }

        handleEdit = (record, type) => {
            this.props.dispatch({type: 'foreignExchangeManage/getForexById', payload: {id: record.id}});

            if(type == OperatorConstant.forex_relate){
                this.props.dispatch({type: 'claim/getUnrelatorderForexList', payload: {id: record.id}});
                this.props.dispatch({type: 'claim/getRelatedorderForexList', payload: {id: record.id}});
                this.props.dispatch({type: 'claim/getStrategyList', payload: {forexId: record.id}});
            }
            this.claimDetail.handleOpen(type);
        }



        handleSearch = () => {
            let values = this.props.form.getFieldsValue();
            let newPage = this.props.foreignExchangeManage.page;
            newPage.page = 1;

            let beginTime = "";
            let endTime = "";

            if (values.rectime != null && values.rectime != undefined) {
                if(values.rectime.length >=2 ){
                    if(values.rectime[0] != ''){
                        beginTime = values.rectime[0].format(dateFormat);
                    }
                    if(values.rectime[1] != ''){
                        endTime = values.rectime[1].format(dateFormat);
                    }

                }
            }


            this.props.dispatch({
                type: 'foreignExchangeManage/getForexList',
                payload: {
                    ...values,
                    beginTime: beginTime,
                    endTime: endTime,
                    page: newPage
                }
            });
        };



        columns = [
            {title: '收款人', dataIndex: 'payee_man', key: 'payee_man'},

            {title: '收款账号', dataIndex: 'payee_account', key: 'payee_account'},

            {title: '收款银行', dataIndex: 'payee_bank', key: 'payee_bank'},

            {title: '收汇币种', dataIndex: 'payee_amountunit', key: 'payee_amountunit'},

            {title: '付汇金额', dataIndex: 'fx_amount', key: 'fx_amount'},

            { title: '付款人', dataIndex: 'pay_man', key: 'pay_man'},

            { title: '付款账号', dataIndex: 'pay_account', key: 'pay_account'},

            { title: '付款金额(CNY)', dataIndex: 'pay_amount', key: 'pay_amount'},

            {title: '付汇方式', dataIndex: 'settlement', key: 'settlement'},

            {title: '付汇时间', dataIndex: 'exchangetime', key: 'exchangetime'},

            {title: '操作', width: '170px', fixed: 'right', key: 'key_oprator',

                render: (text, record, index) => {

                    return (
                        <span>
                             <span><a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.forex_relate)}>关联外汇</a><span className="ant-divider" /></span>

                            <a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.view)}>查看</a>

                         </span>
                    );

                }
            }
        ];



        render () {
            let formItemLayout = {labelCol: {span: 9}, wrapperCol: {span: 15}};
            let formItemLayout2 = {labelCol: {span: 11}, wrapperCol: {span: 9}};

            const { getFieldDecorator } = this.props.form;
            let values = this.props.form.getFieldsValue();

            let beginTime = "";
            let endTime = "";


            if (values.rectime != null && values.rectime != undefined) {
                if(values.rectime.length >=2 ){
                    if(values.rectime[0] != ''){
                        beginTime = values.rectime[0].format(dateFormat);
                    }
                    if(values.rectime[1] != ''){
                        endTime = values.rectime[1].format(dateFormat);
                    }

                }
            }

            let pagination = {
                showTotal: total => `共 ${total} 条数据`,
                pageSize: this.props.foreignExchangeManage.page.size,
                total: this.props.foreignExchangeManage.page.totalRow,
                showSizeChanger: true,
                current:this.props.foreignExchangeManage.page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = this.props.foreignExchangeManage.page;
                    newPage.size = size;
                    newPage.page = 1;
                    this.props.dispatch({
                        type: 'foreignExchangeManage/getForexList',
                        payload: {
                            ...values,
                            beginTime: beginTime,
                            endTime: endTime,
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {

                    let newPage = this.props.foreignExchangeManage.page;
                    newPage.page = pageNumber;
                    this.props.dispatch({
                        type: 'foreignExchangeManage/getForexList',
                        payload: {
                            ...values,
                            beginTime: beginTime,
                            endTime:   endTime,
                            page: newPage
                        }
                    });
                }
            }
            return (
                <div>

                    <Form >
                            <Row>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'收款人'}>
                                        {getFieldDecorator('payeeman', {})(
                                            <Input />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'收款账号'}>
                                        {getFieldDecorator('payeeaccount', {})(
                                            <Input />
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'合同协议号'}>
                                        {getFieldDecorator('contractno', {})(
                                            <Input />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={5}>
                                    <FormItem {...formItemLayout2} label={'付汇金额'}>
                                        {getFieldDecorator('beginAmt', {})(
                                            <Input style={{width: 130}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={3} style={{ marginLeft: -112 }}>
                                    <FormItem  {...formItemLayout2} label={'至'}>
                                        {getFieldDecorator('endAmt', {})(
                                            <Input style={{width: 130}}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={6}>
                                    <FormItem  {...formItemLayout} label={'创建时间'}>
                                        {getFieldDecorator('rectime', {})(
                                            <RangePicker
                                                showTime={{ format: 'YYYY-MM-DD' }}
                                                format="YYYY-MM-DD"
                                                placeholder={['开始时间', '结束时间']}
                                            />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={16} style={{float: 'right'}}>
                                    <Button type="primary" icon="search" style={{marginLeft: 0}} onClick={this.handleSearch.bind(this)}>查询</Button>
                                </Col>
                            </Row>

                    </Form>

                    <Table rowKey="id" dataSource={this.props.foreignExchangeManage.list} columns={this.columns} bordered={true}
                           size={'middle'}  pagination={pagination}/>

                    <ClaimDetail wrappedComponentRef={(inst) => this.claimDetail = inst} dispatch={this.props.dispatch}
                                 dataSource={this.props.foreignExchangeManage.dataSource} claim = {this.props.claim}
                                 handleSearch={this.handleSearch}/>
                </div>
            )
        }
    })

)
